<!DOCTYPE html>


<html theme="dark" showBanner="true" hasBanner="false" > 
<link href="https://cdn.staticfile.org/font-awesome/6.4.2/css/fontawesome.min.css" rel="stylesheet">
<link href="https://cdn.staticfile.org/font-awesome/6.4.2/css/brands.min.css" rel="stylesheet">
<link href="https://cdn.staticfile.org/font-awesome/6.4.2/css/solid.min.css" rel="stylesheet">
<script src="/hexo-blog/js/color.global.min.js" ></script>
<script src="/hexo-blog/js/load-settings.js" ></script>
<head>
  <meta charset="utf-8">
  
  
  

  
  <title>bressanone</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <link rel="preload" href="/hexo-blog/css/fonts/Roboto-Regular.ttf" as="font" type="font/ttf" crossorigin="anonymous">
  <link rel="preload" href="/hexo-blog/css/fonts/Roboto-Bold.ttf" as="font" type="font/ttf" crossorigin="anonymous">

  <meta property="og:type" content="website">
<meta property="og:title" content="bressanone">
<meta property="og:url" content="http://example.com/page/3/index.html">
<meta property="og:site_name" content="bressanone">
<meta property="og:locale" content="zh_CN">
<meta property="article:author" content="Zachary">
<meta name="twitter:card" content="summary">
  
  
    <link rel="icon" media="(prefers-color-scheme: light)" href="/hexo-blog/images/favicon-light-32.png" sizes="32x32">
    <link rel="icon" media="(prefers-color-scheme: light)" href="/hexo-blog/images/favicon-light-128.png" sizes="128x128">
    <link rel="icon" media="(prefers-color-scheme: light)" href="/hexo-blog/images/favicon-light-180.png" sizes="180x180">
    <link rel="icon" media="(prefers-color-scheme: light)" href="/hexo-blog/images/favicon-light-192.png" sizes="192x192">
    <link rel="icon" media="(prefers-color-scheme: dark)" href="/hexo-blog/images/favicon-dark-32.png" sizes="32x32">
    <link rel="icon" media="(prefers-color-scheme: dark)" href="/hexo-blog/images/favicon-dark-128.png" sizes="128x128">
    <link rel="icon" media="(prefers-color-scheme: dark)" href="/hexo-blog/images/favicon-dark-180.png" sizes="180x180">
    <link rel="icon" media="(prefers-color-scheme: dark)" href="/hexo-blog/images/favicon-dark-192.png" sizes="192x192">
  
  
<link rel="stylesheet" href="/hexo-blog/css/style.css">

<meta name="generator" content="Hexo 7.1.1"></head>

<body>
  
   
  <div id="main-grid" class="  ">
    <div id="nav" class=" is_home "  >
      <navbar id="navbar">
  <nav id="title-nav">
    <a href="/hexo-blog/">
      <div id="vivia-logo">
        <div class="dot"></div>
        <div class="dot"></div>
        <div class="dot"></div>
        <div class="dot"></div>
      </div>
      <div>bressanone </div>
    </a>
  </nav>
  <nav id="main-nav">
    
      <a class="main-nav-link" href="/hexo-blog/">主页</a>
    
      <a class="main-nav-link" href="/hexo-blog/archives">归档</a>
    
      <a class="main-nav-link" href="/hexo-blog/about">关于</a>
    
  </nav>
  <nav id="sub-nav">
    <a id="theme-btn" class="nav-icon">
      <span class="light-mode-icon"><svg xmlns="http://www.w3.org/2000/svg" height="20" viewBox="0 -960 960 960" width="20"><path d="M438.5-829.913v-48q0-17.452 11.963-29.476 11.964-12.024 29.326-12.024 17.363 0 29.537 12.024t12.174 29.476v48q0 17.452-11.963 29.476-11.964 12.024-29.326 12.024-17.363 0-29.537-12.024T438.5-829.913Zm0 747.826v-48q0-17.452 11.963-29.476 11.964-12.024 29.326-12.024 17.363 0 29.537 12.024t12.174 29.476v48q0 17.452-11.963 29.476-11.964 12.024-29.326 12.024-17.363 0-29.537-12.024T438.5-82.087ZM877.913-438.5h-48q-17.452 0-29.476-11.963-12.024-11.964-12.024-29.326 0-17.363 12.024-29.537t29.476-12.174h48q17.452 0 29.476 11.963 12.024 11.964 12.024 29.326 0 17.363-12.024 29.537T877.913-438.5Zm-747.826 0h-48q-17.452 0-29.476-11.963-12.024-11.964-12.024-29.326 0-17.363 12.024-29.537T82.087-521.5h48q17.452 0 29.476 11.963 12.024 11.964 12.024 29.326 0 17.363-12.024 29.537T130.087-438.5Zm660.174-290.87-34.239 32q-12.913 12.674-29.565 12.174-16.653-.5-29.327-13.174-12.674-12.673-12.554-28.826.12-16.152 12.794-28.826l33-35q12.913-12.674 30.454-12.674t30.163 12.847q12.709 12.846 12.328 30.826-.38 17.98-13.054 30.653ZM262.63-203.978l-32 34q-12.913 12.674-30.454 12.674t-30.163-12.847q-12.709-12.846-12.328-30.826.38-17.98 13.054-30.653l33.239-31q12.913-12.674 29.565-12.174 16.653.5 29.327 13.174 12.674 12.673 12.554 28.826-.12 16.152-12.794 28.826Zm466.74 33.239-32-33.239q-12.674-12.913-12.174-29.565.5-16.653 13.174-29.327 12.673-12.674 28.826-13.054 16.152-.38 28.826 12.294l35 33q12.674 12.913 12.674 30.454t-12.847 30.163q-12.846 12.709-30.826 12.328-17.98-.38-30.653-13.054ZM203.978-697.37l-34-33q-12.674-12.913-13.174-29.945-.5-17.033 12.174-29.707t31.326-13.293q18.653-.62 31.326 13.054l32 34.239q11.674 12.913 11.174 29.565-.5 16.653-13.174 29.327-12.673 12.674-28.826 12.554-16.152-.12-28.826-12.794ZM480-240q-100 0-170-70t-70-170q0-100 70-170t170-70q100 0 170 70t70 170q0 100-70 170t-170 70Zm-.247-82q65.703 0 111.475-46.272Q637-414.544 637-480.247t-45.525-111.228Q545.95-637 480.247-637t-111.475 45.525Q323-545.95 323-480.247t45.525 111.975Q414.05-322 479.753-322ZM481-481Z"/></svg></span>
      <span class="dark-mode-icon"><svg xmlns="http://www.w3.org/2000/svg" height="20" viewBox="0 -960 960 960" width="20"><path d="M480.239-116.413q-152.63 0-258.228-105.478Q116.413-327.37 116.413-480q0-130.935 77.739-227.435t206.304-125.043q43.022-9.631 63.87 10.869t3.478 62.805q-8.891 22.043-14.315 44.463-5.424 22.42-5.424 46.689 0 91.694 64.326 155.879 64.325 64.186 156.218 64.186 24.369 0 46.978-4.946 22.609-4.945 44.413-14.076 42.826-17.369 62.967 1.142 20.142 18.511 10.511 61.054Q807.174-280 712.63-198.206q-94.543 81.793-232.391 81.793Zm0-95q79.783 0 143.337-40.217 63.554-40.218 95.793-108.283-15.608 4.044-31.097 5.326-15.49 1.283-31.859.805-123.706-4.066-210.777-90.539-87.071-86.473-91.614-212.092-.24-16.369.923-31.978 1.164-15.609 5.446-30.978-67.826 32.478-108.282 96.152Q211.652-559.543 211.652-480q0 111.929 78.329 190.258 78.329 78.329 190.258 78.329ZM466.13-465.891Z"/></svg></span>
    </a>
    
    <div id="nav-menu-btn" class="nav-icon">
      <svg xmlns="http://www.w3.org/2000/svg" height="20" viewBox="0 -960 960 960" width="20"><path d="M177.37-252.282q-17.453 0-29.477-11.964-12.024-11.963-12.024-29.326t12.024-29.537q12.024-12.174 29.477-12.174h605.26q17.453 0 29.477 11.964 12.024 11.963 12.024 29.326t-12.024 29.537q-12.024 12.174-29.477 12.174H177.37Zm0-186.218q-17.453 0-29.477-11.963-12.024-11.964-12.024-29.326 0-17.363 12.024-29.537T177.37-521.5h605.26q17.453 0 29.477 11.963 12.024 11.964 12.024 29.326 0 17.363-12.024 29.537T782.63-438.5H177.37Zm0-186.217q-17.453 0-29.477-11.964-12.024-11.963-12.024-29.326t12.024-29.537q12.024-12.174 29.477-12.174h605.26q17.453 0 29.477 11.964 12.024 11.963 12.024 29.326t-12.024 29.537q-12.024 12.174-29.477 12.174H177.37Z"/></svg>
    </div>
  </nav>
</navbar>
<div id="nav-dropdown" class="hidden">
  <div id="dropdown-link-list">
    
      <a class="nav-dropdown-link" href="/hexo-blog/">主页</a>
    
      <a class="nav-dropdown-link" href="/hexo-blog/archives">归档</a>
    
      <a class="nav-dropdown-link" href="/hexo-blog/about">关于</a>
    
     
    </div>
</div>
<script>
  let dropdownBtn = document.getElementById("nav-menu-btn");
  let dropdownEle = document.getElementById("nav-dropdown");
  dropdownBtn.onclick = function() {
    dropdownEle.classList.toggle("hidden");
  }
</script>
    </div>
    <div id="sidebar-wrapper">
      <sidebar id="sidebar">
  
    <div class="widget-wrap">
  <div class="info-card">
    <div class="avatar">
      
      <div class="img-dim"></div>
    </div>
    <div class="info">
      <div class="username">Zachary </div>
      <div class="dot"></div>
      <div class="subtitle"> </div>
      <div class="link-list">
        
          <a class="link-btn" target="_blank" rel="noopener" href="https://github.com/zzy1661" title="GitHub"><i class="fa-brands fa-github"></i></a>
         
      </div>  
    </div>
  </div>
</div>

  
  <div class="sticky">
    
      


  <div class="widget-wrap">
    <div class="widget">
      <h3 class="widget-title">分类</h3>
      <div class="category-box">
            <a class="category-link" href="/hexo-blog/categories/%E5%89%8D%E7%AB%AF%E7%AC%94%E8%AE%B0/">
                前端笔记
                <div class="category-count">78</div>
            </a>
        
            <a class="category-link" href="/hexo-blog/categories/%E7%AE%97%E6%B3%95%E6%89%8B%E5%86%8C/">
                算法手册
                <div class="category-count">7</div>
            </a>
        </div>
    </div>
  </div>


    
      
  <div class="widget-wrap">
    <div class="widget">
      <h3 class="widget-title">标签</h3>
      <ul class="widget-tag-list" itemprop="keywords"><li class="widget-tag-list-item"><a class="widget-tag-list-link" href="/hexo-blog/tags/Ant-Design/" rel="tag">Ant Design</a></li><li class="widget-tag-list-item"><a class="widget-tag-list-link" href="/hexo-blog/tags/CSS/" rel="tag">CSS</a></li><li class="widget-tag-list-item"><a class="widget-tag-list-link" href="/hexo-blog/tags/Canvas/" rel="tag">Canvas</a></li><li class="widget-tag-list-item"><a class="widget-tag-list-link" href="/hexo-blog/tags/Docker/" rel="tag">Docker</a></li><li class="widget-tag-list-item"><a class="widget-tag-list-link" href="/hexo-blog/tags/ECMAScript-6/" rel="tag">ECMAScript 6</a></li><li class="widget-tag-list-item"><a class="widget-tag-list-link" href="/hexo-blog/tags/JavaScript/" rel="tag">JavaScript</a></li><li class="widget-tag-list-item"><a class="widget-tag-list-link" href="/hexo-blog/tags/Less/" rel="tag">Less</a></li><li class="widget-tag-list-item"><a class="widget-tag-list-link" href="/hexo-blog/tags/MobX/" rel="tag">MobX</a></li><li class="widget-tag-list-item"><a class="widget-tag-list-link" href="/hexo-blog/tags/MongoDB/" rel="tag">MongoDB</a></li><li class="widget-tag-list-item"><a class="widget-tag-list-link" href="/hexo-blog/tags/NPM/" rel="tag">NPM</a></li><li class="widget-tag-list-item"><a class="widget-tag-list-link" href="/hexo-blog/tags/NestJS/" rel="tag">NestJS</a></li><li class="widget-tag-list-item"><a class="widget-tag-list-link" href="/hexo-blog/tags/Node-js/" rel="tag">Node.js</a></li><li class="widget-tag-list-item"><a class="widget-tag-list-link" href="/hexo-blog/tags/Postman/" rel="tag">Postman</a></li><li class="widget-tag-list-item"><a class="widget-tag-list-link" href="/hexo-blog/tags/React-js/" rel="tag">React.js</a></li><li class="widget-tag-list-item"><a class="widget-tag-list-link" href="/hexo-blog/tags/Redux/" rel="tag">Redux</a></li><li class="widget-tag-list-item"><a class="widget-tag-list-link" href="/hexo-blog/tags/TypeScript/" rel="tag">TypeScript</a></li><li class="widget-tag-list-item"><a class="widget-tag-list-link" href="/hexo-blog/tags/UML/" rel="tag">UML</a></li><li class="widget-tag-list-item"><a class="widget-tag-list-link" href="/hexo-blog/tags/Webpack/" rel="tag">Webpack</a></li><li class="widget-tag-list-item"><a class="widget-tag-list-link" href="/hexo-blog/tags/Yeoman/" rel="tag">Yeoman</a></li><li class="widget-tag-list-item"><a class="widget-tag-list-link" href="/hexo-blog/tags/%E5%89%8D%E7%AB%AF/" rel="tag">前端</a></li><li class="widget-tag-list-item"><a class="widget-tag-list-link" href="/hexo-blog/tags/%E6%9E%B6%E6%9E%84/" rel="tag">架构</a></li><li class="widget-tag-list-item"><a class="widget-tag-list-link" href="/hexo-blog/tags/%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F/" rel="tag">正则表达式</a></li><li class="widget-tag-list-item"><a class="widget-tag-list-link" href="/hexo-blog/tags/%E6%BA%90%E7%A0%81/" rel="tag">源码</a></li><li class="widget-tag-list-item"><a class="widget-tag-list-link" href="/hexo-blog/tags/%E7%88%AC%E8%99%AB/" rel="tag">爬虫</a></li><li class="widget-tag-list-item"><a class="widget-tag-list-link" href="/hexo-blog/tags/%E7%AE%97%E6%B3%95/" rel="tag">算法</a></li><li class="widget-tag-list-item"><a class="widget-tag-list-link" href="/hexo-blog/tags/%E9%9D%A2%E8%AF%95/" rel="tag">面试</a></li></ul>
    </div>
  </div>


    
  </div>
</sidebar>
    </div>
    <div id="content-body">
      
   


<article id="post-什么时候该用useReducer" class="h-entry article article-type-post" itemprop="blogPost" itemscope itemtype="https://schema.org/BlogPosting">
   
  <div class="article-inner">
    <div class="article-main">
      <header class="article-header">
        
<div class="main-title-bar">
  <div class="main-title-dot"></div>
  
    
      <h1 itemprop="name">
        <a class="p-name article-title" href="/hexo-blog/2022/02/07/%E4%BB%80%E4%B9%88%E6%97%B6%E5%80%99%E8%AF%A5%E7%94%A8useReducer/">什么时候该用useReducer</a>
      </h1>
    
  
</div>

        <div class='meta-info-bar'>
          <div class="meta-info">
  <time class="dt-published" datetime="2022-02-06T16:00:00.000Z" itemprop="datePublished">2022-02-07</time>
</div>
          <div class="need-seperator meta-info">
            <div class="meta-cate-flex">
  
  <a class="meta-cate-link" href="/hexo-blog/categories/%E5%89%8D%E7%AB%AF%E7%AC%94%E8%AE%B0/">前端笔记</a>
   
</div>
  
          </div>
          <div class="wordcount need-seperator meta-info">
            1.1k 词 
          </div>
        </div>
        
  <ul class="article-tag-list" itemprop="keywords"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/hexo-blog/tags/React-js/" rel="tag">React.js</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/hexo-blog/tags/%E5%89%8D%E7%AB%AF/" rel="tag">前端</a></li></ul>

      </header>
      <div class="e-content article-entry" itemprop="articleBody">
        
          <div class="truncate-text">
            
              「这是我参与2022首次更文挑战的第12天，活动详情查看：2022首次更文挑战」
被滥用的useState和被忽略的useReducer过去的一年里，Hook成了React中最普遍的使用的api。然而Hook的设计是为了更细粒度的划分状态逻辑以便进行复用，在实践中大多数情况却是因写法便捷而使用，以致代码中充斥着滥用的useState和无效的useMemo。
然而并不是每一个Hook api都大受欢迎，useReducer就是最没有存在感的一个，甚至对它存在两个普遍的误解——复杂化的useState和只有在Context场景中才会用到。
useReducer用过redux的人对这个api一定很亲切：
1const [state, dispatch] = useReducer(reducer, initialArg, init);

官网对它的使用场景做了一个描述：

在某些场景下，useReducer 会比 useState 更适用，例如 state 逻辑较复杂且包含多个子值，或者下一个 state 依赖于之前的 state 等。并且，使用 useReducer 还能给那些会触发深...
            
          </div>
        
      </div>

         
    </div>
    
     
    <a class="right-panel  non-pic  "
      
      href="/hexo-blog/2022/02/07/%E4%BB%80%E4%B9%88%E6%97%B6%E5%80%99%E8%AF%A5%E7%94%A8useReducer/" 
    >
       
      <i class="fa-solid fa-angle-right non-pic"></i>
       
    </a>
     
  </div>
  
</article>






   


<article id="post-如何备份掘金上的博客？用node写个爬虫吧~" class="h-entry article article-type-post" itemprop="blogPost" itemscope itemtype="https://schema.org/BlogPosting">
   
  <div class="article-inner">
    <div class="article-main">
      <header class="article-header">
        
<div class="main-title-bar">
  <div class="main-title-dot"></div>
  
    
      <h1 itemprop="name">
        <a class="p-name article-title" href="/hexo-blog/2022/01/29/%E5%A6%82%E4%BD%95%E5%A4%87%E4%BB%BD%E6%8E%98%E9%87%91%E4%B8%8A%E7%9A%84%E5%8D%9A%E5%AE%A2%EF%BC%9F%E7%94%A8node%E5%86%99%E4%B8%AA%E7%88%AC%E8%99%AB%E5%90%A7~/">如何备份掘金上的博客？用node写个爬虫吧~</a>
      </h1>
    
  
</div>

        <div class='meta-info-bar'>
          <div class="meta-info">
  <time class="dt-published" datetime="2022-01-28T16:00:00.000Z" itemprop="datePublished">2022-01-29</time>
</div>
          <div class="need-seperator meta-info">
            <div class="meta-cate-flex">
  
  <a class="meta-cate-link" href="/hexo-blog/categories/%E5%89%8D%E7%AB%AF%E7%AC%94%E8%AE%B0/">前端笔记</a>
   
</div>
  
          </div>
          <div class="wordcount need-seperator meta-info">
            2.1k 词 
          </div>
        </div>
        
  <ul class="article-tag-list" itemprop="keywords"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/hexo-blog/tags/Node-js/" rel="tag">Node.js</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/hexo-blog/tags/%E7%88%AC%E8%99%AB/" rel="tag">爬虫</a></li></ul>

      </header>
      <div class="e-content article-entry" itemprop="articleBody">
        
          <div class="truncate-text">
            
              「这是我参与2022首次更文挑战的第11天，活动详情查看：2022首次更文挑战」
之前一直在掘金记录博客，这两天打算把自己的个人博客建起来，把掘金上的都备份过去。看了一下不知不觉已经写了不少了，于是第一个想法便是写个爬虫把文章爬下来，自动生成markdown文件。
文章的id和请求https://juejin.cn/post/7057816301078577159最后便的数字大概率是文章的id了，因此首先是找自己所有文章的id。
文章管理页面能找到一个列表的请求/article/list_by_user,是一个分页，这里可以写个脚本或手动请求拿到所有的文章id。
于是第一行代码就出来了：
1let ids = [...];

这一步不是重点，重点是获取文章的内容。
获取文章内容首先得找到是哪个接口获取了文章的内容。原本以为是ssr，但是html请求返回的数据似乎并没有做服务端渲染。

排查了一波接口，也都没有发现哪个接口能返回文章内容数据，只好又回到html文档请求上，终于在响应里找到了这个：

掘金并没有使用典型的服务端渲染，他们将文章内容放在了一段脚本里。可以先把里面的内容爬...
            
          </div>
        
      </div>

         
    </div>
    
     
    <a class="right-panel  non-pic  "
      
      href="/hexo-blog/2022/01/29/%E5%A6%82%E4%BD%95%E5%A4%87%E4%BB%BD%E6%8E%98%E9%87%91%E4%B8%8A%E7%9A%84%E5%8D%9A%E5%AE%A2%EF%BC%9F%E7%94%A8node%E5%86%99%E4%B8%AA%E7%88%AC%E8%99%AB%E5%90%A7~/" 
    >
       
      <i class="fa-solid fa-angle-right non-pic"></i>
       
    </a>
     
  </div>
  
</article>






   


<article id="post-React-Redux7源码解析——connect" class="h-entry article article-type-post" itemprop="blogPost" itemscope itemtype="https://schema.org/BlogPosting">
   
  <div class="article-inner">
    <div class="article-main">
      <header class="article-header">
        
<div class="main-title-bar">
  <div class="main-title-dot"></div>
  
    
      <h1 itemprop="name">
        <a class="p-name article-title" href="/hexo-blog/2022/01/27/React-Redux7%E6%BA%90%E7%A0%81%E8%A7%A3%E6%9E%90%E2%80%94%E2%80%94connect/">React-Redux7源码解析——connect</a>
      </h1>
    
  
</div>

        <div class='meta-info-bar'>
          <div class="meta-info">
  <time class="dt-published" datetime="2022-01-26T16:00:00.000Z" itemprop="datePublished">2022-01-27</time>
</div>
          <div class="need-seperator meta-info">
            <div class="meta-cate-flex">
  
  <a class="meta-cate-link" href="/hexo-blog/categories/%E5%89%8D%E7%AB%AF%E7%AC%94%E8%AE%B0/">前端笔记</a>
   
</div>
  
          </div>
          <div class="wordcount need-seperator meta-info">
            5k 词 
          </div>
        </div>
        
  <ul class="article-tag-list" itemprop="keywords"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/hexo-blog/tags/React-js/" rel="tag">React.js</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/hexo-blog/tags/%E6%BA%90%E7%A0%81/" rel="tag">源码</a></li></ul>

      </header>
      <div class="e-content article-entry" itemprop="articleBody">
        
          <div class="truncate-text">
            
              「这是我参与2022首次更文挑战的第10天，活动详情查看：2022首次更文挑战」
前文分析了Provider的源码，以及用Context全局状态管理的问题，本文将进入connect的源码，看看react-redux是如何解决这些问题的。
connectconnect的核心代码在connectAdvanced.js中：
1234567891011121314151617181920212223242526export default function connectAdvanced(...) &#123;    ...    return function wrapWithConnect(WrappedComponent)&#123;        ...        function ConnectFunction(props) &#123;            ...            const renderedChild = useMemo(() =&gt; &#123;                if (shouldHandleStateChanges) &#...
            
          </div>
        
      </div>

         
    </div>
    
     
    <a class="right-panel  non-pic  "
      
      href="/hexo-blog/2022/01/27/React-Redux7%E6%BA%90%E7%A0%81%E8%A7%A3%E6%9E%90%E2%80%94%E2%80%94connect/" 
    >
       
      <i class="fa-solid fa-angle-right non-pic"></i>
       
    </a>
     
  </div>
  
</article>






   


<article id="post-useContext和useReducer真的可以代替Redux吗" class="h-entry article article-type-post" itemprop="blogPost" itemscope itemtype="https://schema.org/BlogPosting">
   
  <div class="article-inner">
    <div class="article-main">
      <header class="article-header">
        
<div class="main-title-bar">
  <div class="main-title-dot"></div>
  
    
      <h1 itemprop="name">
        <a class="p-name article-title" href="/hexo-blog/2022/01/26/useContext%E5%92%8CuseReducer%E7%9C%9F%E7%9A%84%E5%8F%AF%E4%BB%A5%E4%BB%A3%E6%9B%BFRedux%E5%90%97/">useContext和useReducer真的可以代替Redux吗</a>
      </h1>
    
  
</div>

        <div class='meta-info-bar'>
          <div class="meta-info">
  <time class="dt-published" datetime="2022-01-25T16:00:00.000Z" itemprop="datePublished">2022-01-26</time>
</div>
          <div class="need-seperator meta-info">
            <div class="meta-cate-flex">
  
  <a class="meta-cate-link" href="/hexo-blog/categories/%E5%89%8D%E7%AB%AF%E7%AC%94%E8%AE%B0/">前端笔记</a>
   
</div>
  
          </div>
          <div class="wordcount need-seperator meta-info">
            3.5k 词 
          </div>
        </div>
        
  <ul class="article-tag-list" itemprop="keywords"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/hexo-blog/tags/React-js/" rel="tag">React.js</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/hexo-blog/tags/%E5%89%8D%E7%AB%AF/" rel="tag">前端</a></li></ul>

      </header>
      <div class="e-content article-entry" itemprop="articleBody">
        
          <div class="truncate-text">
            
              「这是我参与2022首次更文挑战的第9天，活动详情查看：2022首次更文挑战」
使用hooks代替redux？在react hooks刚出来出来的时候，有很多人都觉得完全可以用hooks代替调繁琐的redux。比如下面这段代码 ：
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394// 创建contextconst ThemeContext = React.createContext(null);// 初始stateconst initState = &#123;  primary: &#x27;blue&#x27;,  secondary: &#x27;gray&#x27;,  fontSize: &#x27;20px&#x27;,  bg: &#x27;aliceblue&...
            
          </div>
        
      </div>

         
    </div>
    
     
    <a class="right-panel  non-pic  "
      
      href="/hexo-blog/2022/01/26/useContext%E5%92%8CuseReducer%E7%9C%9F%E7%9A%84%E5%8F%AF%E4%BB%A5%E4%BB%A3%E6%9B%BFRedux%E5%90%97/" 
    >
       
      <i class="fa-solid fa-angle-right non-pic"></i>
       
    </a>
     
  </div>
  
</article>






   


<article id="post-React-Redux7源码解析——Provider" class="h-entry article article-type-post" itemprop="blogPost" itemscope itemtype="https://schema.org/BlogPosting">
   
  <div class="article-inner">
    <div class="article-main">
      <header class="article-header">
        
<div class="main-title-bar">
  <div class="main-title-dot"></div>
  
    
      <h1 itemprop="name">
        <a class="p-name article-title" href="/hexo-blog/2022/01/25/React-Redux7%E6%BA%90%E7%A0%81%E8%A7%A3%E6%9E%90%E2%80%94%E2%80%94Provider/">React-Redux7源码解析——Provider</a>
      </h1>
    
  
</div>

        <div class='meta-info-bar'>
          <div class="meta-info">
  <time class="dt-published" datetime="2022-01-24T16:00:00.000Z" itemprop="datePublished">2022-01-25</time>
</div>
          <div class="need-seperator meta-info">
            <div class="meta-cate-flex">
  
  <a class="meta-cate-link" href="/hexo-blog/categories/%E5%89%8D%E7%AB%AF%E7%AC%94%E8%AE%B0/">前端笔记</a>
   
</div>
  
          </div>
          <div class="wordcount need-seperator meta-info">
            4.3k 词 
          </div>
        </div>
        
  <ul class="article-tag-list" itemprop="keywords"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/hexo-blog/tags/%E5%89%8D%E7%AB%AF/" rel="tag">前端</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/hexo-blog/tags/%E6%BA%90%E7%A0%81/" rel="tag">源码</a></li></ul>

      </header>
      <div class="e-content article-entry" itemprop="articleBody">
        
          <div class="truncate-text">
            
              「这是我参与2022首次更文挑战的第8天，活动详情查看：2022首次更文挑战」
React Redux8已经使用了React18的useSyncExternalStore，不过还未完成，代码中还。因此本系列将从React Redux 7开始，等8正式出来后再进行比较。关于uSES的用法可以参考前文juejin.cn&#x2F;post&#x2F;705658…
React Redux中核心api也不多，关键的两个是Provider和connect。本系列从Provider开始，看看React Redux到底是如何运行的。
React Redux是如何触发更新的分析源码必须带着问题，React Redux解决的核心问题就是触发react组件的更新。
先来一段简单的代码
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354import &#123; createStore &#125; from &#x27;redux&#x27;;impo...
            
          </div>
        
      </div>

         
    </div>
    
     
    <a class="right-panel  non-pic  "
      
      href="/hexo-blog/2022/01/25/React-Redux7%E6%BA%90%E7%A0%81%E8%A7%A3%E6%9E%90%E2%80%94%E2%80%94Provider/" 
    >
       
      <i class="fa-solid fa-angle-right non-pic"></i>
       
    </a>
     
  </div>
  
</article>






   


<article id="post-React18中的新特性——useSyncExternalStore" class="h-entry article article-type-post" itemprop="blogPost" itemscope itemtype="https://schema.org/BlogPosting">
   
  <div class="article-inner">
    <div class="article-main">
      <header class="article-header">
        
<div class="main-title-bar">
  <div class="main-title-dot"></div>
  
    
      <h1 itemprop="name">
        <a class="p-name article-title" href="/hexo-blog/2022/01/24/React18%E4%B8%AD%E7%9A%84%E6%96%B0%E7%89%B9%E6%80%A7%E2%80%94%E2%80%94useSyncExternalStore/">React18中的新特性——useSyncExternalStore</a>
      </h1>
    
  
</div>

        <div class='meta-info-bar'>
          <div class="meta-info">
  <time class="dt-published" datetime="2022-01-23T16:00:00.000Z" itemprop="datePublished">2022-01-24</time>
</div>
          <div class="need-seperator meta-info">
            <div class="meta-cate-flex">
  
  <a class="meta-cate-link" href="/hexo-blog/categories/%E5%89%8D%E7%AB%AF%E7%AC%94%E8%AE%B0/">前端笔记</a>
   
</div>
  
          </div>
          <div class="wordcount need-seperator meta-info">
            2.1k 词 
          </div>
        </div>
        
  <ul class="article-tag-list" itemprop="keywords"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/hexo-blog/tags/%E5%89%8D%E7%AB%AF/" rel="tag">前端</a></li></ul>

      </header>
      <div class="e-content article-entry" itemprop="articleBody">
        
          <div class="truncate-text">
            
              「这是我参与2022首次更文挑战的第7天，活动详情查看：2022首次更文挑战」
React18的beta版本将useMutableSource更新为了useSyncExternalStore，这个新的api将会对React的各种状态管理库产生非常大的影响，本文将介绍useSyncExternalStore的用法和场景
React状态管理库的核心命题对于React的状态管理库来说，它的首要问题不是如何改变状态，而是如何触发更新。
不管是Mobx的observable，还是Redux的单向数据流，它们本身并不会绑定使用的框架或场景，因此不能直接用在React或其他MV*框架上。于是有了mobx-react和react-redux，将数据管理方案与react相结合。不管是那种数据管理方案，都一定会提供数据变更的观测方式，而观测到数据变更后如何更新，是这些react状态管理的核心命题。
在react中主动触发更新，无非是通过forceUpdate（Mobx）或setState。而其他比如change props，context，也都衍生与setState，因此可以看到react-redu...
            
          </div>
        
      </div>

         
    </div>
    
     
    <a class="right-panel  non-pic  "
      
      href="/hexo-blog/2022/01/24/React18%E4%B8%AD%E7%9A%84%E6%96%B0%E7%89%B9%E6%80%A7%E2%80%94%E2%80%94useSyncExternalStore/" 
    >
       
      <i class="fa-solid fa-angle-right non-pic"></i>
       
    </a>
     
  </div>
  
</article>






   


<article id="post-React18中的新特性——startTransition" class="h-entry article article-type-post" itemprop="blogPost" itemscope itemtype="https://schema.org/BlogPosting">
   
  <div class="article-inner">
    <div class="article-main">
      <header class="article-header">
        
<div class="main-title-bar">
  <div class="main-title-dot"></div>
  
    
      <h1 itemprop="name">
        <a class="p-name article-title" href="/hexo-blog/2022/01/23/React18%E4%B8%AD%E7%9A%84%E6%96%B0%E7%89%B9%E6%80%A7%E2%80%94%E2%80%94startTransition/">React18中的新特性——startTransition</a>
      </h1>
    
  
</div>

        <div class='meta-info-bar'>
          <div class="meta-info">
  <time class="dt-published" datetime="2022-01-22T16:00:00.000Z" itemprop="datePublished">2022-01-23</time>
</div>
          <div class="need-seperator meta-info">
            <div class="meta-cate-flex">
  
  <a class="meta-cate-link" href="/hexo-blog/categories/%E5%89%8D%E7%AB%AF%E7%AC%94%E8%AE%B0/">前端笔记</a>
   
</div>
  
          </div>
          <div class="wordcount need-seperator meta-info">
            997 词 
          </div>
        </div>
        
  <ul class="article-tag-list" itemprop="keywords"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/hexo-blog/tags/%E5%89%8D%E7%AB%AF/" rel="tag">前端</a></li></ul>

      </header>
      <div class="e-content article-entry" itemprop="articleBody">
        
          <div class="truncate-text">
            
              「这是我参与2022首次更文挑战的第6天，活动详情查看：2022首次更文挑战」
startTransition为了构建感觉流畅且响应迅速的应用程序，React18引入了一个新的api：startTransition。这个api能够将部分更新标记为_transitions_，将其从_urgent_（紧急）更新中区分出来。
用法123456import &#123; useTransition &#125; from &#x27;react&#x27;;...const [isPending, startTransition] = useTransition();`startTransition`中的更新是同步执行的，(() =&gt; &#123;  setSearchQuery(input);&#125;);

在startTransition中的更新都被视为_非紧急更新_，如果更新期间出现了用户输入、点击等紧急更新，_transitions_会被中断并挂起，等待紧急更新完成后继续执行。并且React会将抛弃过期的渲染工作，仅渲染最新的更新。 我们可以使用isPending来判断...
            
          </div>
        
      </div>

         
    </div>
    
     
    <a class="right-panel  non-pic  "
      
      href="/hexo-blog/2022/01/23/React18%E4%B8%AD%E7%9A%84%E6%96%B0%E7%89%B9%E6%80%A7%E2%80%94%E2%80%94startTransition/" 
    >
       
      <i class="fa-solid fa-angle-right non-pic"></i>
       
    </a>
     
  </div>
  
</article>






   


<article id="post-React18中的新特性——Automatic batching" class="h-entry article article-type-post" itemprop="blogPost" itemscope itemtype="https://schema.org/BlogPosting">
   
  <div class="article-inner">
    <div class="article-main">
      <header class="article-header">
        
<div class="main-title-bar">
  <div class="main-title-dot"></div>
  
    
      <h1 itemprop="name">
        <a class="p-name article-title" href="/hexo-blog/2022/01/22/React18%E4%B8%AD%E7%9A%84%E6%96%B0%E7%89%B9%E6%80%A7%E2%80%94%E2%80%94Automatic%20batching/">React18中的新特性——Automatic batching</a>
      </h1>
    
  
</div>

        <div class='meta-info-bar'>
          <div class="meta-info">
  <time class="dt-published" datetime="2022-01-21T16:00:00.000Z" itemprop="datePublished">2022-01-22</time>
</div>
          <div class="need-seperator meta-info">
            <div class="meta-cate-flex">
  
  <a class="meta-cate-link" href="/hexo-blog/categories/%E5%89%8D%E7%AB%AF%E7%AC%94%E8%AE%B0/">前端笔记</a>
   
</div>
  
          </div>
          <div class="wordcount need-seperator meta-info">
            2.8k 词 
          </div>
        </div>
        
  <ul class="article-tag-list" itemprop="keywords"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/hexo-blog/tags/React-js/" rel="tag">React.js</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/hexo-blog/tags/%E5%89%8D%E7%AB%AF/" rel="tag">前端</a></li></ul>

      </header>
      <div class="e-content article-entry" itemprop="articleBody">
        
          <div class="truncate-text">
            
              「这是我参与2022首次更文挑战的第5天，活动详情查看：2022首次更文挑战」
从一道经典面试题开始——setState是同步的还是异步的曾有一段时间，这道题目几乎成为了react面试的必问题。
很多人都知道答案：在React的生命周期、合成事件中它是异步的；但是在异步事件、原生事件中，又是同步的
但这个答案仅仅是表象。
这个问题的根源是React或者Vue这种，由数据驱动视图的框架必须回答的一道命题——当数据改变时，如何减少渲染次数。
而这两个框架选择了截然不同的答案。Vue选择了异步更新。而React则是同步更新，合并state：也即setState触发生命周期的流转，但直到调用render前，才对state进行合并，从而表现出“异步”。然而在异步事件或原生事件脱离了react的掌控，没有开启批量更新，从而表现出同步，因此说setState“异步”，是一定要打上引号的。
但是2022年，有经验的面试官不会再问这道题了，因为React18中不会再出现这种既同步又“异步”的怪异现象了。
React18中的Automatic batching在React18中，如果是调用React...
            
          </div>
        
      </div>

         
    </div>
    
     
    <a class="right-panel  non-pic  "
      
      href="/hexo-blog/2022/01/22/React18%E4%B8%AD%E7%9A%84%E6%96%B0%E7%89%B9%E6%80%A7%E2%80%94%E2%80%94Automatic%20batching/" 
    >
       
      <i class="fa-solid fa-angle-right non-pic"></i>
       
    </a>
     
  </div>
  
</article>






   


<article id="post-Redux5源码解析：store与reducer" class="h-entry article article-type-post" itemprop="blogPost" itemscope itemtype="https://schema.org/BlogPosting">
   
  <div class="article-inner">
    <div class="article-main">
      <header class="article-header">
        
<div class="main-title-bar">
  <div class="main-title-dot"></div>
  
    
      <h1 itemprop="name">
        <a class="p-name article-title" href="/hexo-blog/2022/01/21/Redux5%E6%BA%90%E7%A0%81%E8%A7%A3%E6%9E%90%EF%BC%9Astore%E4%B8%8Ereducer/">Redux5源码解析：store与reducer</a>
      </h1>
    
  
</div>

        <div class='meta-info-bar'>
          <div class="meta-info">
  <time class="dt-published" datetime="2022-01-20T16:00:00.000Z" itemprop="datePublished">2022-01-21</time>
</div>
          <div class="need-seperator meta-info">
            <div class="meta-cate-flex">
  
  <a class="meta-cate-link" href="/hexo-blog/categories/%E5%89%8D%E7%AB%AF%E7%AC%94%E8%AE%B0/">前端笔记</a>
   
</div>
  
          </div>
          <div class="wordcount need-seperator meta-info">
            5k 词 
          </div>
        </div>
        
  <ul class="article-tag-list" itemprop="keywords"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/hexo-blog/tags/%E5%89%8D%E7%AB%AF/" rel="tag">前端</a></li></ul>

      </header>
      <div class="e-content article-entry" itemprop="articleBody">
        
          <div class="truncate-text">
            
              「这是我参与2022首次更文挑战的第4天，活动详情查看：2022首次更文挑战」
Redux可以说是一个典型的小而精的lib，源码量及api数量都不多，但设计却十分巧妙。本系列将深入Redux5源码，探究其实现与设计。
storecreateStore用来创建store，可以接收三个参数： createStore(reducer, [preloadedState], [enhancer])
preloadedState是初始state，enhancer是中间件
源码如下：
1234567891011121314151617181920212223function createStore(  reducer,  preloadedState?,  enhancer?)&#123;      if (typeof enhancer !== &#x27;undefined&#x27;) &#123;        return enhancer(createStore)(          reducer,          preloadedState        )      &#...
            
          </div>
        
      </div>

         
    </div>
    
     
    <a class="right-panel  non-pic  "
      
      href="/hexo-blog/2022/01/21/Redux5%E6%BA%90%E7%A0%81%E8%A7%A3%E6%9E%90%EF%BC%9Astore%E4%B8%8Ereducer/" 
    >
       
      <i class="fa-solid fa-angle-right non-pic"></i>
       
    </a>
     
  </div>
  
</article>






   


<article id="post-Redux5源码解析  applyMiddleware——解剖“洋葱圈”" class="h-entry article article-type-post" itemprop="blogPost" itemscope itemtype="https://schema.org/BlogPosting">
   
  <div class="article-inner">
    <div class="article-main">
      <header class="article-header">
        
<div class="main-title-bar">
  <div class="main-title-dot"></div>
  
    
      <h1 itemprop="name">
        <a class="p-name article-title" href="/hexo-blog/2022/01/20/Redux5%E6%BA%90%E7%A0%81%E8%A7%A3%E6%9E%90%20%20applyMiddleware%E2%80%94%E2%80%94%E8%A7%A3%E5%89%96%E2%80%9C%E6%B4%8B%E8%91%B1%E5%9C%88%E2%80%9D/">Redux5源码解析: applyMiddleware——解剖“洋葱圈”</a>
      </h1>
    
  
</div>

        <div class='meta-info-bar'>
          <div class="meta-info">
  <time class="dt-published" datetime="2022-01-19T16:00:00.000Z" itemprop="datePublished">2022-01-20</time>
</div>
          <div class="need-seperator meta-info">
            <div class="meta-cate-flex">
  
  <a class="meta-cate-link" href="/hexo-blog/categories/%E5%89%8D%E7%AB%AF%E7%AC%94%E8%AE%B0/">前端笔记</a>
   
</div>
  
          </div>
          <div class="wordcount need-seperator meta-info">
            2.3k 词 
          </div>
        </div>
        
  <ul class="article-tag-list" itemprop="keywords"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/hexo-blog/tags/%E5%89%8D%E7%AB%AF/" rel="tag">前端</a></li></ul>

      </header>
      <div class="e-content article-entry" itemprop="articleBody">
        
          <div class="truncate-text">
            
              「这是我参与2022首次更文挑战的第3天，活动详情查看：2022首次更文挑战」
Redux可以说是一个典型的小而精的lib，源码量及api数量都不多，但设计却十分巧妙。本系列将深入Redux5源码，探究其实现与设计。
applyMiddleware的洋葱圈applyMiddleware的洋葱圈设计得很巧妙，代码量虽然不多，但是各种匿名函数弯弯绕绕逻辑却不少。
下面的例子中写了两个中间件middleware1和middleware2，它们返回的函数分别为m1_1和m2_1，这两个函数再返回的函数分别为m1_2和m2_2。
1234567891011121314151617181920212223242526272829303132333435363738394041import &#123; createStore, applyMiddleware &#125; from &quot;redux&quot;;function todos(state = [], action) &#123;  switch (action.type) &#123;    case &quot;ADD...
            
          </div>
        
      </div>

         
    </div>
    
     
    <a class="right-panel  non-pic  "
      
      href="/hexo-blog/2022/01/20/Redux5%E6%BA%90%E7%A0%81%E8%A7%A3%E6%9E%90%20%20applyMiddleware%E2%80%94%E2%80%94%E8%A7%A3%E5%89%96%E2%80%9C%E6%B4%8B%E8%91%B1%E5%9C%88%E2%80%9D/" 
    >
       
      <i class="fa-solid fa-angle-right non-pic"></i>
       
    </a>
     
  </div>
  
</article>







  <nav id="page-nav">
    <!-- 在第二页时 page.prev_link 不知为何无法返回正确的链接 -->
    <a id="prev-btn" class="page-nav-btn " href=" /hexo-blog/page/2/  ">
      <i class="fa-solid fa-angle-left"></i>
    </a>
    <div id="num-bar">
      <a class="page-number" href="/hexo-blog/">1</a><a class="page-number" href="/hexo-blog/page/2/">2</a><span class="page-number current">3</span><a class="page-number" href="/hexo-blog/page/4/">4</a><a class="page-number" href="/hexo-blog/page/5/">5</a><span class="space">&hellip;</span><a class="page-number" href="/hexo-blog/page/10/">10</a>  
    </div>
    <a id="next-btn" class="page-nav-btn " href="/hexo-blog/page/4/">
      <i class="fa-solid fa-angle-right"></i>
    </a>
  </nav>


    </div>
    <div id="footer-wrapper">
      <footer id="footer">
  
  <div id="footer-info" class="inner">
    
    &copy; 2024 Zachary<br>
    <!-- Powered by <a href="https://hexo.io/" target="_blank">Hexo</a> & Theme <a target="_blank" rel="noopener" href="https://github.com/saicaca/hexo-theme-vivia">Vivia</a> -->
      <a target="_blank" rel="noopener" href="https://beian.miit.gov.cn">苏ICP备20030005号-2</a>
  </div>
</footer>

    </div>
    <div class="back-to-top-wrapper">
    <button id="back-to-top-btn" class="back-to-top-btn hide" onclick="topFunction()">
        <i class="fa-solid fa-angle-up"></i>
    </button>
</div>

<script>
    function topFunction() {
        window.scroll({ top: 0, behavior: 'smooth' });
    }
    let btn = document.getElementById('back-to-top-btn');
    function scrollFunction() {
        if (document.body.scrollTop > 600 || document.documentElement.scrollTop > 600) {
            btn.classList.remove('hide')
        } else {
            btn.classList.add('hide')
        }
    }
    window.onscroll = function() {
        scrollFunction();
    }
</script>

  </div>
  <script src="/hexo-blog/js/light-dark-switch.js"></script>
</body>
</html>
